<template>
	<div class="app-sidbar-box">
		<div class="list-box">
			<div class="avatar-box">
				<div>
					<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
						<rect x="0" y="0" width="50" height="50" rx="50" ry="50" fill="#CCCCCC" />
						<text x="15" y="36" :font-size="30" fill="#ffffff">R</text>
					</svg>
					<div style="margin-top: 5px;">点击登录</div>
				</div>
			</div>
			<div class="list-box-row" @click="clickd(1)">小程序</div>
			<div class="list-box-row" @click="clickd(2)">raymondGPt</div>
			<!-- <div> class="list-box-row"我的</div> -->
		</div>
	</div>
</template>
<script setup lang="ts">


const emit = defineEmits(['change']);

const clickd = (index: number) => {
	emit('change',{index:index});
}
</script>
<style scoped>
.app-sidbar-box {
	width: 200px;
	height: 100%;
	/* border-right: 1px solid #F0F0F0; */
	&::after {
		content: '';
		position: absolute;
		left: 200px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 86%;
		background-color: #F0F0F0;
		opacity: .8;
	}
}
.list-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.list-box-row{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		/* border-bottom: 1px solid #F0F0F0; */
		cursor: pointer;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 10px;
			bottom: 0px;
			transform: translateY(-50%);
			width: 90%;
			height: 1px;
			background-color: #F0F0F0;
			opacity: .8;
		}
	}
	.list-box-row:hover{
		background-color: #F0F0F0;
	}
	.list-box-row-active{
		background-color: #F0F0F0;
	}
	.avatar-box {
		height:100px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
		position: relative;
		div{
			cursor: pointer;
		}
		&::after {
			content: '';
			position: absolute;
			left: 10px;
			bottom: 0px;
			transform: translateY(-50%);
			width: 90%;
			height: 1px;
			background-color: #F0F0F0;
			opacity: .8;
		}
	}
}
</style>